<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HealthHub - 数据中心</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 配置Tailwind主题 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif']
                    }
                }
            }
        }
    </script>
    <!-- 引入Chart.js用于数据可视化 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <!-- 引入一些字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <!-- 图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
    <!-- 主容器 - 模拟手机屏幕 -->
    <div class="max-w-md mx-auto bg-white min-h-screen shadow-lg overflow-hidden pb-20">
        <!-- 顶部状态栏 -->
        <div class="bg-primary text-white p-4 flex justify-between items-center">
            <div class="flex items-center">
                <span class="font-bold text-xl">数据中心</span>
            </div>
            <div class="flex items-center space-x-3">
                <i class="fas fa-calendar-days"></i>
                <div class="w-8 h-8 rounded-full bg-gray-300 overflow-hidden">
                    <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=100&h=100" 
                         alt="用户头像" class="w-full h-full object-cover">
                </div>
            </div>
        </div>

        <!-- 数据时间范围选择器 -->
        <div class="p-4 bg-white border-b border-gray-100">
            <div class="flex justify-between items-center">
                <h2 class="text-lg font-semibold">健康数据</h2>
                <div class="flex space-x-2">
                    <button class="px-3 py-1 text-xs rounded-full bg-primary text-white">今日</button>
                    <button class="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">本周</button>
                    <button class="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">本月</button>
                    <button class="px-3 py-1 text-xs rounded-full bg-gray-100 text-gray-500">
                        <i class="fas fa-sliders"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- 数据概览卡片 -->
        <div class="p-4">
            <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-xl p-4 text-white mb-5 shadow-md">
                <div class="flex justify-between items-center mb-3">
                    <div>
                        <h3 class="font-medium text-sm opacity-90">今日活动</h3>
                        <p class="text-2xl font-bold">1,240</p>
                        <p class="text-xs opacity-80">卡路里</p>
                    </div>
                    <div class="w-16 h-16 bg-white/20 rounded-full flex items-center justify-center">
                        <i class="fas fa-bolt text-yellow-300 text-2xl"></i>
                    </div>
                </div>
                <div class="flex justify-between text-sm">
                    <div>
                        <p class="opacity-90">7,245</p>
                        <p class="text-xs opacity-80">步数</p>
                    </div>
                    <div>
                        <p class="opacity-90">5.2</p>
                        <p class="text-xs opacity-80">公里</p>
                    </div>
                    <div>
                        <p class="opacity-90">124</p>
                        <p class="text-xs opacity-80">活动分钟</p>
                    </div>
                </div>
            </div>

            <!-- 数据图表区域 -->
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-5">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold">活动趋势</h3>
                    <div class="flex space-x-2">
                        <button class="px-2 py-1 text-xs rounded-md bg-blue-100 text-blue-600">步数</button>
                        <button class="px-2 py-1 text-xs rounded-md bg-gray-100 text-gray-500">卡路里</button>
                        <button class="px-2 py-1 text-xs rounded-md bg-gray-100 text-gray-500">距离</button>
                    </div>
                </div>
                <div class="h-64">
                    <canvas id="activityChart"></canvas>
                </div>
            </div>

            <!-- 睡眠数据分析 -->
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-5">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold">睡眠分析</h3>
                    <span class="text-xs text-gray-400">最近7天</span>
                </div>
                <!-- 睡眠时间图表 -->
                <div class="mb-3">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm text-gray-500">睡眠时长</span>
                        <span class="text-sm font-medium">7.5小时</span>
                    </div>
                    <!-- 睡眠质量条形图 -->
                    <div class="h-5 bg-gray-100 rounded-full overflow-hidden flex">
                        <div class="h-full bg-indigo-700" style="width: 15%"></div>
                        <div class="h-full bg-indigo-500" style="width: 45%"></div>
                        <div class="h-full bg-indigo-300" style="width: 25%"></div>
                        <div class="h-full bg-gray-200" style="width: 15%"></div>
                    </div>
                    <div class="flex justify-between text-xs text-gray-500 mt-1">
                        <span>深睡 1.1h</span>
                        <span>浅睡 3.4h</span>
                        <span>REM 1.9h</span>
                        <span>清醒 1.1h</span>
                    </div>
                </div>
                <!-- 睡眠周期图表 -->
                <div class="h-36">
                    <canvas id="sleepChart"></canvas>
                </div>
                <!-- 睡眠评分 -->
                <div class="flex justify-between items-center mt-3">
                    <div>
                        <span class="text-sm text-gray-500">睡眠评分</span>
                        <div class="flex items-center mt-1">
                            <span class="text-xl font-bold mr-1">85</span>
                            <span class="text-xs text-green-500"><i class="fas fa-arrow-up"></i> 5%</span>
                        </div>
                    </div>
                    <div class="w-20 h-20">
                        <canvas id="sleepScoreChart"></canvas>
                    </div>
                </div>
            </div>

            <!-- 健康指标概览 -->
            <h3 class="font-semibold mb-3">健康指标</h3>
            <div class="grid grid-cols-2 gap-3 mb-5">
                <!-- 体重指标 -->
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-500">体重</span>
                        <div class="w-8 h-8 bg-green-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-weight-scale text-green-500 text-sm"></i>
                        </div>
                    </div>
                    <div class="flex items-baseline">
                        <span class="text-2xl font-bold">68.5</span>
                        <span class="text-sm text-gray-500 ml-1">kg</span>
                    </div>
                    <div class="flex items-center mt-1">
                        <span class="text-xs text-green-500 mr-1"><i class="fas fa-arrow-down"></i> 0.3</span>
                        <span class="text-xs text-gray-400">vs 上周</span>
                    </div>
                </div>
                
                <!-- 心率指标 -->
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-500">平均心率</span>
                        <div class="w-8 h-8 bg-red-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-heart-pulse text-red-500 text-sm"></i>
                        </div>
                    </div>
                    <div class="flex items-baseline">
                        <span class="text-2xl font-bold">72</span>
                        <span class="text-sm text-gray-500 ml-1">BPM</span>
                    </div>
                    <div class="flex items-center mt-1">
                        <span class="text-xs text-gray-400">静息心率: 62 BPM</span>
                    </div>
                </div>
                
                <!-- 血压指标 -->
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-500">血压</span>
                        <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-stethoscope text-blue-500 text-sm"></i>
                        </div>
                    </div>
                    <div class="flex items-baseline">
                        <span class="text-2xl font-bold">120/80</span>
                        <span class="text-sm text-gray-500 ml-1">mmHg</span>
                    </div>
                    <div class="flex items-center mt-1">
                        <span class="text-xs text-green-500 mr-1">正常</span>
                    </div>
                </div>
                
                <!-- 血氧指标 -->
                <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-500">血氧饱和度</span>
                        <div class="w-8 h-8 bg-purple-100 rounded-full flex items-center justify-center">
                            <i class="fas fa-lungs text-purple-500 text-sm"></i>
                        </div>
                    </div>
                    <div class="flex items-baseline">
                        <span class="text-2xl font-bold">98</span>
                        <span class="text-sm text-gray-500 ml-1">%</span>
                    </div>
                    <div class="flex items-center mt-1">
                        <span class="text-xs text-green-500 mr-1">优秀</span>
                    </div>
                </div>
            </div>

            <!-- 营养摄入分析 -->
            <div class="bg-white rounded-xl border border-gray-100 shadow-sm p-4 mb-8">
                <div class="flex justify-between items-center mb-4">
                    <h3 class="font-semibold">今日营养摄入</h3>
                    <button class="text-xs text-primary">详情</button>
                </div>
                
                <!-- 卡路里进度 -->
                <div class="mb-4">
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm text-gray-500">总卡路里</span>
                        <span class="text-sm font-medium">1,450 / 2,000 卡</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2.5">
                        <div class="bg-orange-500 h-2.5 rounded-full" style="width: 72.5%"></div>
                    </div>
                </div>
                
                <!-- 营养素摄入比例 -->
                <div class="flex justify-between mb-3">
                    <div class="w-24 h-24 relative">
                        <canvas id="nutrientChart"></canvas>
                        <div class="absolute inset-0 flex items-center justify-center flex-col">
                            <span class="text-xs text-gray-500">剩余</span>
                            <span class="font-bold">550</span>
                            <span class="text-xs text-gray-500">卡</span>
                        </div>
                    </div>
                    <div class="flex-1 pl-3 flex flex-col justify-center">
                        <div class="flex items-center mb-2">
                            <div class="w-3 h-3 rounded-full bg-blue-500 mr-2"></div>
                            <div class="flex-1 flex justify-between">
                                <span class="text-sm">蛋白质</span>
                                <span class="text-sm font-medium">65g</span>
                            </div>
                        </div>
                        <div class="flex items-center mb-2">
                            <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
                            <div class="flex-1 flex justify-between">
                                <span class="text-sm">碳水</span>
                                <span class="text-sm font-medium">210g</span>
                            </div>
                        </div>
                        <div class="flex items-center">
                            <div class="w-3 h-3 rounded-full bg-yellow-500 mr-2"></div>
                            <div class="flex-1 flex justify-between">
                                <span class="text-sm">脂肪</span>
                                <span class="text-sm font-medium">45g</span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 水分摄入 -->
                <div>
                    <div class="flex justify-between items-center mb-1">
                        <span class="text-sm text-gray-500">水分摄入</span>
                        <span class="text-sm font-medium">1.2 / 2.0 L</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-2.5">
                        <div class="bg-cyan-500 h-2.5 rounded-full" style="width: 60%"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部导航栏 -->
        <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-white border-t border-gray-200 px-6 py-2">
            <div class="flex justify-between items-center">
                <a href="health_app_home.html" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-home text-xl"></i>
                    <span class="text-xs mt-1">首页</span>
                </a>
                <a href="#" class="flex flex-col items-center text-primary">
                    <i class="fas fa-chart-line text-xl"></i>
                    <span class="text-xs mt-1">数据</span>
                </a>
                <div class="relative -mt-5">
                    <button class="w-14 h-14 rounded-full bg-gradient-to-r from-primary to-indigo-600 flex items-center justify-center shadow-lg text-white">
                        <i class="fas fa-plus text-xl"></i>
                    </button>
                </div>
                <a href="#" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-users text-xl"></i>
                    <span class="text-xs mt-1">社区</span>
                </a>
                <a href="#" class="flex flex-col items-center text-gray-400">
                    <i class="fas fa-user text-xl"></i>
                    <span class="text-xs mt-1">我的</span>
                </a>
            </div>
        </div>
    </div>

    <!-- Chart.js实现各种图表 -->
    <script>
        // 活动趋势图表
        const activityCtx = document.getElementById('activityChart').getContext('2d');
        const activityChart = new Chart(activityCtx, {
            type: 'line',
            data: {
                labels: ['周一', '周二', '周三', '周四', '周五', '周六', '今天'],
                datasets: [{
                    label: '步数',
                    data: [8542, 7621, 9354, 6852, 10245, 7862, 7245],
                    borderColor: '#3B82F6',
                    backgroundColor: 'rgba(59, 130, 246, 0.1)',
                    tension: 0.3,
                    fill: true
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: false,
                        grid: {
                            display: true,
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 睡眠周期图表
        const sleepCtx = document.getElementById('sleepChart').getContext('2d');
        const sleepChart = new Chart(sleepCtx, {
            type: 'line',
            data: {
                labels: ['22:00', '23:00', '00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00'],
                datasets: [{
                    label: '睡眠周期',
                    data: [0, 2, 3, 4, 2, 3, 4, 3, 2, 0],
                    borderColor: '#4F46E5',
                    backgroundColor: 'rgba(79, 70, 229, 0.1)',
                    tension: 0.4,
                    fill: true,
                    pointRadius: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    }
                },
                scales: {
                    y: {
                        beginAtZero: true,
                        max: 4,
                        ticks: {
                            stepSize: 1,
                            callback: function(value) {
                                if(value === 0) return '清醒';
                                if(value === 1) return 'REM';
                                if(value === 2) return '浅睡';
                                if(value === 3) return '中睡';
                                if(value === 4) return '深睡';
                            }
                        },
                        grid: {
                            display: true,
                            color: 'rgba(0, 0, 0, 0.05)'
                        }
                    },
                    x: {
                        grid: {
                            display: false
                        }
                    }
                }
            }
        });

        // 睡眠评分图表
        const scoreCtx = document.getElementById('sleepScoreChart').getContext('2d');
        const sleepScoreChart = new Chart(scoreCtx, {
            type: 'doughnut',
            data: {
                datasets: [{
                    data: [85, 15],
                    backgroundColor: [
                        '#4F46E5',
                        '#EEF2FF'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '80%',
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        enabled: false
                    }
                }
            }
        });

        // 营养素摄入比例图表
        const nutrientCtx = document.getElementById('nutrientChart').getContext('2d');
        const nutrientChart = new Chart(nutrientCtx, {
            type: 'doughnut',
            data: {
                labels: ['蛋白质', '碳水', '脂肪'],
                datasets: [{
                    data: [25, 55, 20],
                    backgroundColor: [
                        '#3B82F6',
                        '#10B981',
                        '#F59E0B'
                    ],
                    borderWidth: 0
                }]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                cutout: '70%',
                plugins: {
                    legend: {
                        display: false
                    }
                }
            }
        });
    </script>
</body>
</html> 